<example name="Badge">

  <file type="html">
    <div id="badges"></div>
  </file>

  <file type="js">
     import {render} from 'react-dom';
     import React from 'react';

     import Badge from '@jetbrains/ring-ui/components/badge/badge';
     import Group from '@jetbrains/ring-ui/components/group/group';

     const renderBadgeDemo = () => (
       <Group>
         <Badge>simple</Badge>
         <Badge gray>gray</Badge>
         <Badge valid>valid</Badge>
         <Badge invalid>invalid</Badge>
         <Badge disabled>disabled</Badge>
       </Group>
     );

     render(renderBadgeDemo(), document.getElementById('badges'));
  </file>
</example>
